<template>
    <div class="login-container">
        <h3 class="title">系统登录</h3>
        <el-form class="login-form" v-model="loginData" ref="loginFormRef" label-width="0px">
            <el-form-item prop="username">
                <el-input 
                    v-model="loginData.username" 
                    placeholder="用户名"
                    :prefix-icon="User" 
                    >
                </el-input>
            </el-form-item>
            <el-form-item prop="password">
                <template #prefix>
                    <Lock/>
                </template>
                <el-input
                    v-model="loginData.password"
                    type="password"
                    placeholder="密码"
                    prefix-icon="Lock"
                    show-password
                    @keyup.enter.native="handleLogin">
                </el-input>
            </el-form-item>
            <el-form-item>
                <div class="submit-swappper">
                    <el-button 
                    type="primary" 
                    class="login-btn" 
                    @click.prevent="handleLogin"
                    :Loading = "loading"
                    >登 录</el-button>
                </div>
            </el-form-item>
        </el-form>
        <p><span>用户名：</span><span>{{ loginData.username }}</span></p>
        <p><span>密码：</span><span>{{ loginData.password }}</span></p>
        <p><span>Token：</span><span>{{ loginData.password }}</span></p>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store/modules/user'
import type { LocationQuery, LocationQueryValue } from 'vue-router'
import { useRoute } from 'vue-router'
import router from '@/router';
import { ref } from 'vue';
import { ElForm } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import type { LoginData } from "@/api/auth/types"

// stores
const userStore = useUserStore();
const route = useRoute(); // 路由

const loginFormRef = ref<InstanceType<typeof ElForm>>();
const loginData = ref<LoginData>({
    username:'admin',
    password:'123456'
})
const loading = ref(false); // 按钮loading状态

/**
 * 登录
 */
function handleLogin() {
    const query:LocationQuery = route.query;
    const redirect = (query.redirect as LocationQueryValue) || '/';
    router.push({ path: redirect});
    // loginFormRef.value?.validate((valid:boolean) => {
    //     if (valid) {
    //         // Perform login logic here
    //         console.log('Login successful:', loginData);
    //         loading.value = true;
    //         userStore
    //         .login(loginData.value)
    //         .then(() => {
    //             const query:LocationQuery = route.query;
    //             const redirect = (query.redirect as LocationQueryValue) || '/';
    //             const otherQueryParams = Object.keys(query).reduce(
    //                 (acc: any, cur: string) => {
    //                 if (cur !== "redirect") {
    //                     acc[cur] = query[cur];
    //                 }
    //                 return acc;
    //                 },
    //                 {}
    //             );

    //             router.push({ path: redirect, query: otherQueryParams });
    //         })
    //         .finally(() => {
    //             loading.value = false;
    //         });
    //     } else {
    //         console.error('Login failed: Form validation error');
    //     }
    // });
}
</script>

<style lang="scss" scoped>
.login-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    .login-form{
        width: 300px;
        .submit-swappper{
            width: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
    .el-input .el-input__suffix {
        display: inline-flex;
    }
</style>